(function($) {
	$.fn.citySelect = function(option) {
		var defaults = {

		};
		var cityValue = $.extend(defaults, option);
		console.log(cityValue);
		return this.each(function() {
			$this=this;
			getDOMHtml(cityValue,$this);

			$("#selectArea").offset({
				"left" : $(this).offset().left - 80,
				"top" : $(this).offset().top + 30
			});
			$("#selectArea .peDiv li").click(function(){
				$(this).siblings().removeClass("focus").end().addClass("focus");
				$("#selectArea .cyDiv ul").eq($(this).index()).show().siblings().hide();
			});
			$("#selectArea .cyDiv ul li").click(function(){
				$(this).siblings().removeClass("focus").end().addClass("focus");
				$(".cityInput").text($(this).text());
				$("#selectArea").hide();
			});
			$(this).children("div.selectImg").click(function(){
				$("#selectArea").show();
			});
		});
		function getDOMHtml(getDOMHtml) {
			var currentC="";
			var pvHtml = "";
			var cityHtml = "";
			var innerHtml = "<div class='cityInput'></div><div class='selectImg'><img src='_assert/img/arrow.png' /></div>" + "<div id='selectArea'><div class='current'><div class='sps'><span>当前位置：" + "</span><span class='cityInput'>12</span><span><img src='_assert/img/arrow2.png' /></span></div></div>" + "<div class='peDiv'><ul></ul></div>" + "<div class='cyDiv'></div>";
			console.log("2222");
			console.log(innerHtml);
			$.each(cityValue.list, function(key, val) {
				console.log("111");
				console.log(val);
				var ulHtml = "";
				if (val.flag == "1") {
					ulHtml = "<ul style='display:block;'>";
					pvHtml += "<li class='focus'>" + val.province + "</li>";
					$.each(val.city, function(i, n) {
						if (n.flag == "1"){
							ulHtml += "<li class='focus'>" + n.name + "</li>";
							currentC=n.name;
						}else{
								
						ulHtml += "<li>" + n.name + "</li>";
						}
						
					});
					ulHtml += "</ul>";
				} else {
					ulHtml = "<ul style='display:none;'>";
					pvHtml += "<li>" + val.province + "</li>";
					$.each(val.city, function(i, n) {
						if (n.flag == "1")
							ulHtml += "<li class='focus'>" + n.name + "</li>";
						ulHtml += "<li>" + n.name + "</li>";
					});
					ulHtml += "</ul>";
				}
				cityHtml += ulHtml;
			});
			$($this).html(innerHtml);
			$(".peDiv ul").html(pvHtml);
			$(".cyDiv").html(cityHtml);
			$(".cityInput").text(currentC);
			$("#selectArea").hide();
		};
	};
	
})(jQuery);
